/*
 * @Author: shenqi 
 * @Date: 2021-09-14 09:17:35 
 * @Last Modified by: shenqi
 * @Last Modified time: 2021-09-18 14:12:56
 */

<template>
  <div class="json-editor">
    <el-button
      type="primary"
      size="small"
      style="margin-bottom: 30px"
      @click="toUpdata"
      >修改表单</el-button
    >
    <textarea ref="textarea"/>
  </div>
</template>

<script>
import CodeMirror from "codemirror";
import "codemirror/addon/lint/lint.css";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/rubyblue.css";
require("script-loader!jsonlint");
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/json-lint";
export default {
  /* eslint-disable vue/require-prop-types */
  props: ["value"],
  data() {
    return {
      jsonEditor: false,
    };
  },
  watch: {
    value(value) {
      // console.log(value)
      const editorValue = this.jsonEditor.getValue();
      if (value !== editorValue) {
        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
      }
    },
  },
  mounted() {
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
      lineNumbers: true,
      mode: "application/json",
      gutters: ["CodeMirror-lint-markers"],
      theme: "rubyblue",
      lint: true,
    });

    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
    this.jsonEditor.on("change", (cm) => {
      this.$emit("changed", cm.getValue());
      this.$emit("input", cm.getValue());
    });
  },
  methods: {
    
    getValue() {
      return this.jsonEditor.getValue();
    },
    toUpdata() {
      // console.log(this.value)
      if (this.value !== undefined)
        this.$emit("updataValue", JSON.parse(this.value));
    },
  },
};
</script>

<style lang="scss" scoped>
.json-editor {
  height: 100%;
  position: relative;

  ::v-deep {
    .CodeMirror {
      height: auto;
      min-height: 800px;
    }

    .CodeMirror-scroll {
      min-height: 800px;
    }

    // .cm-s-rubyblue span.cm-string {
    //   color: #000;
    // }
    // .cm-number {
    //   color: #000;
    // }
    // .cm-s-rubyblue.CodeMirror {
    //   background: #F2F2F2;
    //   color: #000;
    // }
    // .cm-s-rubyblue .CodeMirror-gutters {
    //   background: #F2F2F2;
    //   border-right: 3px solid #000;
    // }
    // .CodeMirror-linenumber {
    //   color: #000;
    // }
  }
}
</style>
